﻿@{
    ViewBag.Title = "焦点墙";
    Layout = null;
    var w = 593;
    var h = 307;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.fn.cooSlider = function (options) {
            var config = {
                auto: true,
                speed: 8000,
                cur: 0
            },
    ops = $.extend(config, options),
    _this = this,
    timer = null,
    len = _this.find(".slide-items .slide-item").length,
    _h = _this.find(".slide-items .slide-item").height(),
    cur = ops.cur,
    tmp = '<div class="slide-nav-bg"></div><ol class="slide-nav">';
            for (var i = 0; i < len; i++) {
                tmp += '<li>' + (i + 1) + '</li>';
            }
            tmp += '</ol>';
            $(tmp).appendTo(_this);

            chg(cur);
            if (ops.auto) {
                timer = setInterval(
            function () { chg() }, ops.speed
        );
            }

            _this.find(".slide-nav li").mouseover(function () {
                var index = $(this).index();
                chg(index);
            });

            _this.hover(
        function () {
            if (timer) {
                clearInterval(timer);
            }
        }, function () {
            if (ops.auto) {
                timer = setInterval(
                    function () { chg() }, ops.speed
                );
            }
        }
    );
            function chg(index) {
                if (index == null) {
                    index = (cur + 1) % len;
                }
                _this.find(".cur").removeClass("cur");
                _this.find(".slide-nav li").eq(index).addClass("cur");
                _this.find(".slide-items-wrap").animate({ 'top': index * -1 * _h }, { queue: false });
                cur = index;
            }
        };
        $(function () { $("#shouye_jiaodiantu").cooSlider(); });
    </script>
    <style type="text/css">
        body{margin:0;}
        .slide
        {
            float: right;
            overflow: hidden;
            position: relative;
            width: @(w)px;
            height: @(h)px;
            font-size: 0;
            line-height: 0;
        }
        .slide-items-wrap
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        .slide-item
        {
            overflow: hidden;
            position: relative;
            height: @(h)px;
        }
        .slide-item .brick
        {
            position: absolute;
        }
        .slide-nav-bg
        {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: #000;
            filter: alpha(opacity=30);
            -moz-opacity: .3;
            opacity: .3;
        }
        .slide-nav
        {
            position: absolute;
            bottom: 5px;
            right: 7px;
        }
        .slide-nav li
        {
            float: left;
            display: inline;
            width: 18px;
            height: 18px;
            margin: 0 3px;
            background: #FFF;
            border: 1px solid #e6e6e6;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
            cursor: default;
        }
        .slide-nav .cur
        {
            background: #404040;
            border-color: #404040;
            color: #FFF;
            font-weight: 700;
        }
        .HM
        {
            width: @(w + 1)px;
        }
        .slide ul li
        {
            margin: 0;
            padding: 0;
        }
        .slide ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img
        {
            border:none;
            }
    </style>
</head>
<body>
    <div class="HM">
        <div class="slide" id="shouye_jiaodiantu">
            <div class="slide-items-wrap" style="top: -@(h)px;">
                <ul class="slide-items" id="J-slide-items">
                    <li class="slide-item"><a class="brick"  style="width: @(w)px; height: @(h)px;
                        top: 0px; left: 0px;" target="_blank">
                        <img alt="" title="" src='@Url.Content("~/Content/SliderImgs/logon01.png")'>
                    </a></li>
                    <li class="slide-item"><a class="brick"  style="width: @(w)px; height: @(h)px;
                        top: 0px; left: 0px;" target="_blank">
                        <img alt="" title="" src='@Url.Content("~/Content/SliderImgs/logon02.png")'>
                    </a></li>
                    <li class="slide-item"><a class="brick"  style="width: @(w)px; height: @(h)px;
                        top: 0px; left: 0px;" target="_blank">
                        <img alt="" title="" src='@Url.Content("~/Content/SliderImgs/logon03.png")'>
                    </a></li>
                    <li class="slide-item"><a class="brick"  style="width: @(w)px; height: @(h)px;
                        top: 0px; left: 0px;" target="_blank">
                        <img alt="" title="" src='@Url.Content("~/Content/SliderImgs/logon04.png")'>
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
